<template>
  <div class="seller-list-item clearfix">
    <div class="avatar">
      <img :src="data.pic_url" alt="">
    </div>

    <div class="content">
      <div class="shop-title">{{ data.name}}</div>

      <div class="shop-mid-line clearfix">
        <star class="fl" :size="24" :score="data.wm_poi_score"></star> 
        <span class="count fl">月售{{ data.month_sale_num }}</span> 
        <span class="distance fr">{{ data.distance }}</span> 
        <span class="time fr">{{ data.avg_delivery_time }}分钟</span> 
      </div>

      <div class="shop-line">
        <span class="start">{{ data.min_price_tip }}</span>
        <span class="deliver">{{ data.shipping_fee_tip }}</span>
      </div>

      <div class="activity" v-for="sup in data.discounts2" :key="sup.info">
        <p><img :src="sup.icon_url"><span>{{sup.info}}</span></p>
      </div>
    </div>
  </div>
</template>

<script>
import Star from '@/components/base/star/star'
export default {
  components: {
    Star
  },
  props: {
    data: {
      type: Object,
      default: null
    }
  }
}

</script>
<style lang='scss' scoped>
@import '@/assets/scss/const.scss';
@import '@/assets/scss/mixin.scss';

.seller-list-item {
  &:after{
    content: '';
    position: absolute;
    width: 100%;
    height: 1px;
    background: #e4e4e4;
    bottom: 0;
  }
  border-bottom: 1px solid #e4e4e4;
  text-align: left;
  margin-left: 10px;
  padding: 12px 0;
  position: relative;
  .avatar {
    width: 90px;
    position: absolute;
    border: 1px solid #e4e4e4;
    img {
      width: 100%;
      height: auto;
    }
  }
  .content {
    margin-left: 100px;
    overflow: hidden;
    .shop-title{

    }
    .shop-mid-line{
      font-size: 12px;
      margin-top: 4px;
      margin-bottom: 8px;
      line-height: 16px;
      // height: 24px;
      // line-height: 24px;
      color: #656565;
      .distance {
        margin-right: 10px;
        margin-left: 4px;
        padding-left: 6px;
        border-left: 1px solid #e4e4e4;
      }
    } 
    .shop-line{
      font-size: 12px;
      color: #656565;
      margin-top: 3px;
      margin-bottom: 12px;
      .start {
        padding-right: 6px;
        border-right: 1px solid #e4e4e4;
      }
      .deliver { 
        padding-left: 6px;
      }
    }
    .activity {
      color: #898989;
      font-size: 12px;
      line-height: 17px;
      img {
        width: 14px;
        height: 14px;
      }
      span {
        margin-left: 4px;
      }
    }
  }
}
</style>